<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue四级项目1-2</title>
    <style>
        /*最外层大块高度，由内容填充*/
       #app{
           background-color: gainsboro;
           width: 210px;
       }
       .content{
           width: 200px;
           height: 250px;
           /*弹性布局*/
           display: flex;
           /*分配方向*/
           flex-direction: row;
           /*定义是否换行*/
           flex-wrap: wrap;
       }
       .content div{
           width: 50px;
           height: 50px;
           box-sizing: border-box;
           border: 1px solid gray;
           border-radius: 50%;
           display: flex;
           background-color: ghostwhite;
           /*沿主轴方向水平居中*/
           justify-content: center;
           /*水平分时，沿垂直方向对齐*/
           align-items: center;
       }
    </style>
</head>
<body>
 <div id="app">
     <div>
         <!--v-model：表单绑定-->
         算式<input type="text" v-model="shuanshi" readonly/><br>
         输入<input type="text" v-model="num"/>
         结果<input type="text" v-model="result"/>
     </div>
     <div class="content">
         <!--每个点击事件等于号后，为其处理函数-->
         <div @click="clear()">C</div>
         <div @click="clearCe()">CE</div>
         <div></div>
         <div></div>
         <div @click="changeNum('1')">1</div>
         <div @click="changeNum('2')">2</div>
         <div @click="changeNum('3')">3</div>
         <div @click="changeF('+')">+</div>
         <div @click="changeNum('4')">4</div>
         <div @click="changeNum('5')">5</div>
         <div @click="changeNum('6')">6</div>
         <div @click="changeF('-')">-</div>
         <div @click="changeNum('7')">7</div>
         <div @click="changeNum('8')">8</div>
         <div @click="changeNum('9')">9</div>
         <div @click="changeF('*')">*</div>
         <div @click="changeF('/')">/</div>
         <div @click="changeNum('0')">0</div>
         <div @click="changeNum('.')">.</div>
         <div @click="changeF('=')">=</div>
     </div>
 </div>
<script src="vue.global.js"></script>
<script>
 Vue.createApp({
     date(){
         return{
            shuanshi:'',
            num:'',
            result:''
         }
     },
     methods:{
         //点击数字，变化输入部分
         changeNum(shu){
             this.num+=shu
         },
         //点击=，计算结果
         //点击等号之外的符号，变化算式
         changeF(fuhao){
             if (fuhao!='='){
                 this.shuanshi+=this.num+fuhao
                 this.num=''
             }else {
                 this.shuanshi+=this.num
                 this.result=eval(this.shuanshi);
             }
         },
         //清空
         clear(){
             this.num=''
             this.shuanshi=''
         },
         //只清空ce
         clearCe(){
             this.num=''
         }
     },
     computed:{
         //计算属性，对计算结果处理，保留2位小数
         newnum(){
             return this.result.toFixed(2)
         }
     }
 }).mount("#app")
</script>
</body>
</html>